<template>
	<view>
		<!-- 更多【配置】 -->
		<u-popup v-model="isShow" mode="center" border-radius="5">
			<view class="sendMsg">
				<view class="header u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
					<view class="">更多设置</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="text-bold u-p-l-30 u-p-r-30 u-m-t-15">标题样式设定</view>
				<view class="u-p-l-30 u-p-r-30">
					<u-checkbox-group>
						<u-checkbox :active-color="theme.bgColor" v-model="style_form.style[0]" name="b">粗体</u-checkbox>
						<u-checkbox :active-color="theme.bgColor" v-model="style_form.style[1]" name="u">下划线</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="u-flex u-p-l-30 u-p-r-30">
					<text class="text-bold">标题颜色设定</text>
					<text class="u-tips-color u-p-l-20">设定颜色二将启用渐变</text>
				</view>
				<view class="u-flex u-p-l-30 u-p-r-30">
					<view class="u-flex-6 u-p-r-10">
						<view class="u-flex u-border u-p-l-10">
							<u-input v-model="style_form.color[0]" type="text" placeholder="颜色一" :border="false" />
							<view class="u-border-left u-p-15 u-flex u-row-center" style="width: 80rpx;" @click="selectColor(0)"><u-icon name="edit-pen-fill"></u-icon></view>
						</view>
					</view>
					<view class="u-flex-6 u-p-l-10">
						<view class="u-flex u-border u-p-l-10">
							<u-input v-model="style_form.color[1]" type="text" placeholder="颜色二" :border="false" />
							<view class="u-border-left u-p-15 u-flex u-row-center" style="width: 80rpx;" @click="selectColor(1)"><u-icon name="edit-pen-fill"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="u-p-l-30 u-p-r-30">
					<view class="text-bold u-p-b-30">置顶设定</view>
					<u-checkbox :active-color="theme.bgColor" v-model="check" name="top" @change="checkboxChange">置顶</u-checkbox>
				</view>
				<view class="u-text-center u-m-t-30 u-p-t-30 u-p-b-30 u-border-top">
					<u-button
						hover-class="none"
						type="primary"
						:custom-style="{ width: '80%', height: '60rpx', backgroundColor: theme.bgColor, color: theme.color }"
						size="mini"
						@click="styleConfirm"
					>
						保存
					</u-button>
				</view>
			</view>
		</u-popup>
		<t-color-picker ref="colorPicker" @confirm="colorConfirm"></t-color-picker>
	</view>
</template>

<script>
export default {
	name: 'fa-more-config',
	props: {
		styleObject: {
			type: String,
			default: ''
		},
		source_id: {
			type: [Number, String],
			default: 0
		},
		flag: {
			type: String,
			default: 'top'
		},
		type: {
			type: String,
			default: 'article'
		}
	},
	data() {
		return {
			isShow: false,
			style_form: {
				style: [false, false],
				color: ['', ''],
				flag: ''
			},
			colorIndex: 0,
			check: false
		};
	},
	methods: {
		show() {
			this.isShow = true;
			setTimeout(() => {
				this.init();
			}, 500);
		},
		close() {
			this.isShow = false;
		},
		init() {
			let s = this.styleObject.split('|');
			s.forEach(item => {
				if (item == 'b') {
					this.$set(this.style_form.style, 0, true);
				}
				if (item == 'u') {
					this.$set(this.style_form.style, 1, true);
				}
				if (item.indexOf('#') != -1) {
					let color = item.split(',');
					this.$set(this.style_form.color, 0, color[0]);
					if (color.length == 2) {
						this.$set(this.style_form.color, 1, color[1]);
					}
				}
			});
			this.style_form.flag = this.flag;
			this.check = !!this.flag;
		},
		checkboxChange(e) {
			this.style_form.flag = !e.value ? e.name : '';
		},
		//选择颜色
		selectColor(index) {
			this.colorIndex = index;
			this.$refs.colorPicker.open();
		},
		colorConfirm(e) {
			this.$set(this.style_form.color, this.colorIndex, e.hex);
		},
		//更多设置提交
		styleConfirm: async function() {
			let s = ['', ''];
			s[0] = this.style_form.style[0] ? 'b' : '';
			s[1] = this.style_form.style[1] ? 'u' : '';
			var res = false;
			if (this.type == 'article') {
				res = await this.$api.goArticleConfig({
					id: this.source_id,
					style: s,
					color: this.style_form.color,
					flag: this.style_form.flag
				});
			} else if (this.type == 'question') {
				res = await this.$api.goQuestionConfig({
					id: this.source_id,
					style: s,
					color: this.style_form.color,
					flag: this.style_form.flag
				});
			}
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			this.$emit('updateMore', 'update');
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
// 弹出层的公共样式
.sendMsg {
	width: 600rpx;
	height: 770rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
}
</style>
